<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 自己练习列表 </title>
</head>
<body>
    <div id="app">
        <p> 测试: v-for 遍历数组 </p>
        <ul>
            <li v-for="(value,key) in my_list" :key="key">
                {{key}} -- {{value.name}} -- {{value.age}}
                <button @click="my_del(key)"> 删除 </button>
                <button @click="my_up(key,{name:'tianqi',age:20})"> 更新 </button>
                <button @click="my_test(key)"> 练习增删改 </button>
            </li>
        </ul>
        <button @click="my_add({name:'wangba',age:21})"> 添加 </button>
        <p> 测试: v-for 遍历对象 </p>
        <ul>
            <li v-for="(value,key) in my_list[1]" :key="key">
                {{ key }} -- {{ value }}
            </li>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    /*
        // 增加
        let arr = [1, 2, 3, 4, 5];
        arr.splice(2, 0, 'a', 'b'); // 从索引2开始不删除任何元素，添加'a'和'b'
        console.log(arr); // 输出: [1, 2, 'a', 'b', 3, 4, 5]
        // 删除
        let arr = [1, 2, 3, 4, 5];
        arr.splice(2, 1); // 从索引2开始删除1个元素
        console.log(arr); // 输出: [1, 2, 4, 5]
        // 修改
        let arr = [1, 2, 3, 4, 5];
        arr.splice(2, 2, 'a', 'b'); // 从索引2开始删除2个元素，然后添加'a'和'b'
        console.log(arr); // 输出: [1, 2, 'a', 'b', 5]
     */
    const vm = new Vue({
        el:"#app",
        data:{
            my_list:[
                {name:"zhangsan",age:18},
                {name:"list",age:16},
                {name:"wangwu",age:17},
                {name:"zhaoliu",age:19},
            ],
            my_arr:[0,1, 2, 3, 4, 5],
        },
        methods:{
            my_del:function (key) {
               this.my_list.splice(key,1)
            },
            my_up:function (key,data) {
                console.log(key,data)
                this.my_list.splice(key,1,data)
            },
            my_add:function (data) {
                this.my_list.push(data)
            },
            my_test:function (key){
                this.my_arr.splice(-1,1,key) // 增
                // this.my_arr.splice(key,1) // 删
                // this.my_arr.splice(key,1,100) // 改
                console.log(this.my_arr)
            },
        }
    })
</script>